<template>
  <div class="resource-tab">

    <template v-if="node.workloadKind === 'vm'">
      <div class="mb10 flex">

        <div v-for="item in vmInfoList" class="card" :key="item.key" :style="item.style || {}">
          <div class="card-title" :title="item.title">{{ item.title }}:</div>
          <div class="card-value">
            {{ formatUnit(workloadInfo[item.dataIndex], item.unit) ?? '--' }}
          </div>

        </div>
      </div>
    </template>
    <template v-else>
      <div class='mb10 flex'>
        <div v-for="item in firstInfoList" class="card" :key="item.key" :style="item.style || {}">
          <div class="card-title" :title="item.title">{{ item.title }}:</div>
          <div class="card-value">
            {{ formatUnit(workloadInfo[item.dataIndex], item.unit) ?? '--' }}
          </div>

        </div>
      </div>
      <div class='mb10 flex'>
        <div v-for="item in secondInfoList" class="card" :key="item.key" :style="item.style || {}">
          <div class="card-title" :title="item.title">{{ item.title }}:</div>
          <div class="card-value">
            {{ formatUnit(workloadInfo[item.dataIndex], item.unit) ?? '--' }}
          </div>

        </div>
      </div>
    </template>
    <ga-row :gutter="16" style="margin-bottom: 16px;">
      <ga-col :span="8">

        <BorderChartWithPicker title="CPU使用量" :option="cpuOption" :params="lineParams"
          @on-time-refresh="(params) => getCpuUsage(params, apiType)" />
      </ga-col>
      <ga-col :span="8">
        <BorderChartWithPicker title="内存使用量" :option="memoryOption" :params="lineParams"
          @on-time-refresh="(params) => getMemoryUsage(params, apiType)" />
      </ga-col>
      <ga-col :span="8">
        <BorderChartWithPicker title="磁盘使用量" :option="diskOption" :params="lineParams"
          @on-time-refresh="(params) => getDiskUsage(params, apiType)" />
      </ga-col>
    </ga-row>
    <div class='topo_warp'>
      <ga-empty v-if="isEmpty(hierachyTopoData)" />
      <div style=" width: 100% " v-else>
        <HierarchyTopo :nodes="hierachyTopoData.nodes || []" :edges="hierachyTopoData.edges || []"
          @on-click-node="nodeClick" />
      </div>
    </div>
    <ResourceDrawer :visible="nodeDrawerState.visible" :node="nodeDrawerState.currentNode"
      :queryTime="{ ...queryTime, sliderValue: null }" @on-close="onClose" />
  </div>
</template>
<script>
import { isEmpty } from 'lodash'
import { onMounted, reactive, ref, watch } from 'vue'
import ResourceDrawer from './components/ResourceDrawer/ResourceDrawer.vue';
import ChartWithPicker from '@/components/ChartWithPicker'
import BorderChartWithPicker from '@/components/BorderChartWithPicker'
import useCharts from './useCharts';
export default {
  methods: {
    isEmpty
  }
}
</script>
<script setup>

import { formatUnit } from '@/utils/format'
import useHierarchyData from './useHierarchyData';
import useResourceInfo from './useResourceInfo';
import HierarchyTopo from './components/HierarchyTopo/HierarchyTopo.vue';
import { bus } from '@/utils/eventBus';
const props = defineProps({
  node: {
    type: Object,
    default: () => ({})
  },
  queryTime: {
    type: Object,
    default: () => ({})
  },
  apiType: {
    type: String
  }
})
const { workloadInfo, vmInfoList, firstInfoList, secondInfoList, getWorkloadInfo } = useResourceInfo(props)
const { cpuOption, memoryOption, diskOption, getCpuUsage, getMemoryUsage, getDiskUsage } = useCharts()
const { hierachyTopoData, getTopoData } = useHierarchyData()
const nodeDrawerState = reactive({
  visible: false,
  currentNode: {}
})
const lineParams = ref({})
const initData = () => {
  const { from, to } = props.queryTime;
  const node = props.node
  const params = {
    masterIp: node.masterIp,
    namespace: node.namespace,
    name: node.workloadName,
    type: node.workloadKind,
    pid: node.pid,
    systemNodeId: node.systemNodeId,
    from,
    to
  }
  lineParams.value = params
  getWorkloadInfo(params)
  getTopoData(params)
  getCpuUsage(params, props.apiType)
  getMemoryUsage(params, props.apiType)
  getDiskUsage(params, props.apiType)
}
const nodeClick = (node) => {
  nodeDrawerState.currentNode = node
  nodeDrawerState.visible = true;
  console.log('当前点击的节点', node, nodeDrawerState, 'state')
}
const onClose = () => {
  nodeDrawerState.currentNode = {};
  nodeDrawerState.visible = false;
}
watch([() => props.node, () => props.queryTime, () => props.apiType], ([node, queryTime]) => {
  console.log(node, 'node update');

  if (node && queryTime.from) {
    initData();
  }
})
onMounted(() => {
  if (props.node && props.queryTime.from) {
    initData()
  }
  bus.on('updateTopoNodeDetail', () => {
    if (props.node && props.queryTime.from) {
      initData()
    }
  })
})
</script>

<style scoped lang="scss">
.resource-tab {
  .card {
    background-color: rgba(34, 110, 231, 0.06);
    padding: 12px;
    border-radius: 4px;
    flex-basis: 0;
    flex-grow: 1;
    margin: 0 4px;
    overflow: hidden;

    .card-title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .card-value {
      font-size: 18px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
